<template>
  <div class="test-problems-page">
    <h2>题目测试页面</h2>
    
    <div class="test-controls">
      <el-button @click="testRealAPI" type="primary">测试真实API</el-button>
      <el-button @click="testMockData" type="success">测试Mock数据</el-button>
      <el-button @click="clearResults" type="warning">清除结果</el-button>
    </div>
    
    <div class="results" v-if="results.length > 0">
      <h3>测试结果</h3>
      <div v-for="(result, index) in results" :key="index" class="result-item">
        <h4>{{ result.title }}</h4>
        <p><strong>状态:</strong> {{ result.status }}</p>
        <p><strong>题目数量:</strong> {{ result.count }}</p>
        <p><strong>详情:</strong> {{ result.details }}</p>
        <div v-if="result.problems" class="problem-list">
          <h5>题目列表:</h5>
          <ul>
            <li v-for="problem in result.problems.slice(0, 5)" :key="problem.id">
              {{ problem.id }}. {{ problem.title }} ({{ problem.type }})
            </li>
            <li v-if="result.problems.length > 5">... 还有 {{ result.problems.length - 5 }} 道题目</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { problemsApi } from '@/api/problems'

const results = ref<any[]>([])

const testRealAPI = async () => {
  try {
    console.log('测试真实API...')
    const response = await problemsApi.getProblems()
    
    results.value.push({
      title: '真实API测试',
      status: '成功',
      count: response.problems?.length || 0,
      details: `API返回了 ${response.problems?.length || 0} 道题目`,
      problems: response.problems
    })
  } catch (error: any) {
    console.error('API测试失败:', error)
    results.value.push({
      title: '真实API测试',
      status: '失败',
      count: 0,
      details: `错误: ${error.message || '未知错误'}`,
      problems: []
    })
  }
}

const testMockData = () => {
  // 模拟mock数据测试
  const mockProblems = [
    { id: 1, title: '两数之和', type: 'code' },
    { id: 2, title: '反转字符串', type: 'code' },
    { id: 3, title: '最大子数组和', type: 'code' }
  ]
  
  results.value.push({
    title: 'Mock数据测试',
    status: '成功',
    count: mockProblems.length,
    details: `Mock数据包含 ${mockProblems.length} 道题目`,
    problems: mockProblems
  })
}

const clearResults = () => {
  results.value = []
}
</script>

<style scoped>
.test-problems-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-controls {
  margin-bottom: 20px;
}

.test-controls .el-button {
  margin-right: 10px;
}

.results {
  margin-top: 20px;
}

.result-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}

.result-item h4 {
  margin-top: 0;
  color: #333;
}

.problem-list {
  margin-top: 10px;
}

.problem-list ul {
  list-style: none;
  padding-left: 0;
}

.problem-list li {
  padding: 2px 0;
  border-bottom: 1px solid #eee;
}
</style>
